<template>
  <div>
    <img style="width: 100%" :src="pic" class="remarkPic" v-for="pic in remarkPics"/>
    <p style="height: 40px;"/>

    <div @click="onUnlockClick" class="bottomButton" v-if="false">
      限时特惠 &nbsp;<span style="color:#FF955D">￥{{ price }}</span> <span style="margin-left: 10px;color: gray">￥<span
      class="original_price">9</span></span>
    </div>
    <!--    <div @click="onUnlockClick" class="bottomButton" v-if="!canUse">-->
    <!--    ¥ {{price}} 解锁-->
    <!--    <img src="/web-hft-ee/static/img/evaluation/evaluation_lock_blue.png"-->
    <!--         style="height: 16px;width: 16px;margin-left: 8px;"/>-->
    <!--  </div>-->

    <!--    <div  class="bottomButton">-->
    <!--      优化中，敬请期待...-->
    <!--    </div>-->
    <div @click="onToEvaluationClick" class="bottomButton" v-else-if="!hasTested">
      提交评测
    </div>
    <div class="bottomButton" style="display: flex" v-else>
      <div @click="onToReportClick" class="bottomButton2Row">分析报告</div>
      |
      <div @click="onToEvaluationClick" class="bottomButton2Row">重新评测</div>
    </div>
  </div>
</template>

<script>
  import EvaluationAPI from '../../repo/api/EvaluationAPI'
  import {push} from '../../router/util'
  import {payTool} from '../../utils/payTool'
  import store from '../../repo/store/store'
  import BuyAPI from '../../repo/api/BuyAPI'
  import {Toast, Dialog} from 'vant'
  import router from '../../router'
  import {verifyOrder} from "../../utils/payVerify";
  import {isIOS} from "../../utils/util";

  export default {
    name: 'evaluation-desc',
    data() {
      return {
        bean: {}
      }
    },
    computed: {
      param() {
        return this.$route.params
      },
      evaluationId() {
        return this.param.evaluationId
      },
      remarkPics() {
        return this.bean['remarkPic']
      },
      canUse() {
        return this.bean['hasBuyInt'] === 1
      },
      price() {
        return this.bean['price'] || '0'
      },
      hasTested() {
        return !!this.bean['evaluateResultInfo']
      }
    },
    created() {
      window['testPrePlayNativeCallback'] = (jsonStr = '{}') => this.testPrePlayNativeCallback(jsonStr);
      window['testPayDoneCallback'] = (jsonStr = '{}') => this.testPayDoneCallback(jsonStr);

      EvaluationAPI.getEvaluateById(this.evaluationId)
        .then((result) => {
          this.bean = result['responseData'];
          console.log('this.bean', this.bean);
        });
    },
    mounted() {
      // verifyOrder(this.$route.query.prepay_id)
      window.onpageshow = function (e) {
        if (e.persisted || (window.performance && window.performance.navigation.type === 2)) {
          window.location.reload()
        }
      }
      window['jsGetSalesCallBack'] = (jsonStr) => {
        this.jsGetSalesCallBack(jsonStr)
      }
    },
    beforeDestroy() {
      window.onpageshow = () => {

      }
    },
    methods: {

      jsGetSalesCallBack (callback) {
        let data = typeof callback === 'object' ? callback : JSON.parse(callback)
        if (data) {
          Dialog.confirm({
            message: data.content,
            confirmButtonText: '去联系',
          }).then(() => {
            window.open(`tel://${data.tellPhone}`)
          })
        }
      },
      onUnlockClick() {
        if (isIOS) {
          window.zshft.jsGetSalesCall('jsGetSalesCallBack')
          return
        }
        payTool.aliAddOrderAndInvokePay({targetId: this.evaluationId, returnUrl: window.location.href, targetType: 44})

      },
      onToEvaluationClick() {
        // 检测是否开会员
        if (!this.$store.getters['memberInfo/isOpen']) return this.$buyMemberPopup();
        // 是否已购买 扣房豆
        this.requestNativeMethods('onJsPreparePlayingEUVideo', 'testPrePlayNativeCallback');
      },
      onToReportClick() {
        push(`/evaluation-report/${this.evaluationId}/0`)
      },

      /**
       * type 1:视频 2:音频  3:文档 4:测试 5: 职业测评
       * @param {string} execFn 执行方法
       * @param {string | undefined} callback 回调函数
       */
      requestNativeMethods(execFn, callback = undefined) {
        if (!execFn) throw new Error('execFn or callback can not be null');
        if (!window.hasOwnProperty('zshft')) return;
        const { title: subjectName, id: subjectId } = this.bean;
        let params = {
          subjectId,
          subjectName,
          type: 5
        };
        window.zshft[execFn](JSON.stringify(params), callback);
      },

      /**
       * 查询原生APP客户端回调
       * @param jsonStr code 0 已扣 1 未扣
       */
      testPrePlayNativeCallback(jsonStr) {
        let { code = '1', info } = JSON.parse(jsonStr);
        if (code * 1 === 0) return push(`/evaluation-test/${ this.evaluationId }`);
        this.requestNativeMethods('onJsConfirmPlayingEUVideo', 'testPayDoneCallback');
      },

      /**
       * 扣豆完成回调
       * @param jsonStr
       */
      testPayDoneCallback(jsonStr) {
        let { code, info } = JSON.parse(jsonStr);
        if (code * 1 === 1) push(`/evaluation-test/${ this.evaluationId }`);
      }
    },
  }
</script>

<style scoped>

  .remarkPic {
    width: 100vw;
    object-fit: scale-down;
  }

  .bottomButton {
    font-size: 16px;
    color: #3585F4;
    background: white;
    bottom: 0px;
    position: fixed;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 100%;
    box-shadow: 1px 1px 30px rgba(98, 98, 98, 0.8);

  }

  .bottomButton2Row {
    flex-grow: 1;
    height: 40px;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .original_price {
    text-decoration: line-through;
    font-size: 16px;
    color: gray;
  }

</style>
